<!--
* @author wn
* @date 2022/08/17 14:36:08
* @description: 提交订单页面--抽离收货地址组件
!-->
<template>
	<div class="check-out-address">
		<!-- 没有数据时 -->
		<div v-if="!addressList" class="none">
			您需要先添加收货地址才可提交订单。
		</div>
		<!-- 收货地址 -->
		<shopping-address v-else :showAddress="showAddress">
			<!-- 默认插槽 -->
			<a
				@click="target.openDialog(showAddress)"
				class="updateAddress"
				href="javascript:;"
			>
				修改地址
			</a>
		</shopping-address>
		<div class="right">
			<xtx-button @click="openDialog">切换地址</xtx-button>
			<xtx-button @click="target.openDialog()">添加地址</xtx-button>
		</div>
	</div>
	<xtx-dialog v-model="dialogVisible" :topCover="topCover">
		<!-- 默认插槽 -->
		<shopping-address
			v-for="address in addressList"
			:key="address.id"
			:showAddress="address"
			:border="true"
			:active="address.id === selectedAddress?.id"
			@click="selectedAddress = address"
		>
			<!-- 默认插槽 -->
			<i
				@click="deleteAddressFn(address.id)"
				class="iconfont icon-close-new"
			></i>
		</shopping-address>
		<!-- 具名插槽 -->
		<template #footer>
			<xtx-button
				@click="dialogVisible = false"
				type="gray"
				style="margin-right: 20px"
			>
				取消
			</xtx-button>
			<xtx-button @click="confirm" type="primary">确认</xtx-button>
		</template>
	</xtx-dialog>
	<!-- 将 添加 修改 地址 单独提取出来  我选择 不提取
	通过 标识  生成 默认插槽 v-if ='switch add update'
	组件实例定义 函数  父组件  ref="target" 获取实例  就可以直接调用 -->
	<address-edit ref="target" />
</template>
<script>
import ShoppingAddress from './ShoppingAddress'
import AddressEdit from './AddressEdit'
import { inject, ref, watchEffect } from 'vue'
import Message from '@/components/library/message'
import Confirm from '@/components/library/confirm'
import { deleteAddress } from '@/network/order'
export default {
	name: 'CheckOutAddress',
	components: { ShoppingAddress, AddressEdit },
	props: {
		addressList: {
			type: Array,
			default: () => [],
		},
	},
	setup(props, { emit }) {
		/**
		 *  1 显示默认收货地址  isDefault === 0
		 *  2 没有默认  显示 第一条地址
		 *  3 没有数据  显示 添加收货地址
		 */
		// const showAddress = ref(props.addressList[0])
		// const defaultAddress = props.addressList.find(
		// 	address => address.isDefault === 0
		// )

		/* const firstAddressComputed = computed(() => {
			if (props.addressList.length) {
				return props.addressList[0]
			}
			return false
		}) */

		// if (defaultAddress) {
		// 	showAddress.value = defaultAddress
		// }

		/* else {
			showAddress.value = firstAddressComputed.value
		} */

		// 父组件 props传值  父组件数据改变  子组件不更新
		const showAddress = ref(null)
		watchEffect(() => {
			showAddress.value = props.addressList[0]
			const defaultAddress = props.addressList.find(
				address => address.isDefault === 0
			)
			if (defaultAddress) {
				showAddress.value = defaultAddress
			}
		})

		// v-model 控制对话框的展示
		const dialogVisible = ref(false)
		// 初始化时向父组件传递 地址 id
		const addressId = showAddress.value && showAddress.value.id
		emit('changeAddress', addressId)
		// 选择地址
		const selectedAddress = ref(null)
		// 确认按钮  1 更改展示地址 2 传递 id 3 关闭对话框
		// 此切换 并没有修改 默认地址 isDefault:0 刷新 恢复
		const confirm = () => {
			if (!selectedAddress.value) {
				// dialogVisible.value = false
				return Message({ type: 'warn', message: '请选择收货地址' })
			}
			showAddress.value = selectedAddress.value
			emit('changeAddress', showAddress.value.id)
			dialogVisible.value = false
		}
		// 打开对话框   清空选中数据
		const openDialog = () => {
			dialogVisible.value = true
			selectedAddress.value = null
		}
		/**
		 * 删除收货地址
		 * 弹出XtxDialog 点击 对话框外面  对话框消失
		 * 点击删除按钮 又弹出 确认框  操作确认框时 相当于点击 dialog外面 会消失
		 * 这里 通过数据 观察 控制  每次点击删除按钮  数据都是 true
		 * 每次点击cover 取消 确定 右上角X 按钮  数据都是 false
		 */
		const topCover = ref(false)
		const getAddressList = inject('getAddressList')
		const deleteAddressFn = async id => {
			topCover.value = true
			try {
				await Confirm({ message: '亲，是否删除该地址?' })
				await deleteAddress(id)
				// 刷新 地址列表
				getAddressList()
			} catch (error) {}
			// 点击确定 点击取消 X 先close 后 重置cover 数据 异步任务晚于同步
			topCover.value = false
		}
		// 添加 修改 地址   调用组件实例中的方法
		const target = ref(null)
		return {
			showAddress,
			dialogVisible,
			selectedAddress,
			confirm,
			openDialog,
			target,
			deleteAddressFn,
			topCover,
		}
	},
}
</script>
<style scoped lang="less">
// 收货地址
.check-out-address {
	display: flex;
	align-items: center;
	border: 1px solid #f5f5f5;
	margin: 20px 0;
	.none {
		flex: 1;
		line-height: 130px;
		color: #999;
		text-align: center;
	}
	.right {
		width: 420px;
		text-align: center;
		& > * {
			width: 140px;
			height: 46px;
			font-size: 14px;
		}
		& > :last-child {
			margin-left: 16px;
		}
	}
}
.updateAddress {
	color: @xtxColor;
	border-right: 1px solid #f5f5f5;
	padding: 35px 52px;
}
.iconfont {
	padding: 0 50px;
}
</style>
